<template>
  <div class="detailSwipe">
    <van-swipe height="100px" autoplay="2000">
      <van-swipe-item v-for="item in housePicture.housePics" :key="item.orderIndex">
        <img :src="item.url" alt="">
      </van-swipe-item>

      <template #indicator="{ active, total }">
        <!-- <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div> -->
        <div class="custom-indicator">
          <!-- 
            高亮：分组高亮
           -->
          <div v-for="(value, key, index) in picGourp" :key="index"
            :class="{ actived: housePicture.housePics[active]?.enumPictureCategory == key }">
            <span class="text">{{ getTitle(value[0].title) }}</span>
            <span class="count"
              v-show="housePicture.housePics[active]?.enumPictureCategory == key">{{ getCategoryIndex(housePicture.housePics[active]) }}/{{
                value.length }}</span>
          </div>
        </div>

      </template>
    </van-swipe>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const props = defineProps({
  housePicture: {
    type: Object,
    default: () => ({})
  }
})

// 分组
const picGourp = {}
for (const i in props.housePicture.housePics) {
  picGourp[props.housePicture.housePics[i].enumPictureCategory] = []
}

for (const i in props.housePicture.housePics) {
  const valueArr = picGourp[props.housePicture.housePics[i].enumPictureCategory]
  valueArr.push(props.housePicture.housePics[i])
}

function getTitle(name) {
  name = name.replace("【", '').replace("】", '').replace("：", "")
  return name
}

// 当前分类的第几个元素
function getCategoryIndex(item) {
  const valueArr = picGourp[item?.enumPictureCategory]
  return valueArr?.findIndex(data => data === item) + 1
}

</script>

<style scoped lang="less">
.detailSwipe {
  img {
    width: 100%;
  }

  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;

    div {
      margin: 0 5px;

      &.actived {
        color: red;
      }
    }
  }
}
</style>
